<template>
  <div class="list yun-checkbox">
    <div class="item item-borderless item-icon-left"
         v-for="(option, i) in options" @click="onClick(i)">
      <hairline-top v-if="i > 0"></hairline-top>

      <input type="checkbox" :name="checkboxName" :id="checkboxName + '-' + i" v-model="v" :value="i">
      <span v-text="option"></span>
      <i class="icon ion-ios-checkmark"
        :class="{
          'grey':  v.indexOf(i) == -1,
          'green': v.indexOf(i) > -1 && theme == 'green'
        }"
      >
      </i>

      <hairline-bottom v-if="i < options.length - 1"></hairline-bottom>
    </div>
  </div>
</template>
<script>
  import HairlineTop from '../list/HairlineTop'
  import HairlineBottom from '../list/HairlineBottom'

  export default{
    components: {
      HairlineTop,
      HairlineBottom
    },

    props: {
      options: {
        type: Array,
        required: true
      },

      value: {
        type: [Array, Number],
        required: true
      },

      theme: {
        type: String,
        default: 'grey'
      }
    },

    computed: {
      v: function () {
        return this.value
      }
    },

    data() {
      return {
        checkboxName: 'von-checkbox-' + Math.random().toString(36).substring(3, 6)
      }
    },

    methods: {
      onClick(i) {
        let index = this.v.indexOf(i)
        if (index == -1) {
          this.v.push(i)
        } else {
          this.v.splice(index, 1)
        }
        this.v.sort()
      }
    }
  }
</script>
